<template>
    <!--
        Vue模板语法有2大类：
        1.插值语法：
            功能：用于解析标签体内容。<h3>你好，{{name}}</h3>
            写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，或者函数调用返回值
        2.指令语法：
            href="school.url"普通的标签属性，值是school.url
            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
            举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx被解析为js表达式，
                        且可以直接读取到data中的所有属性。
            备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
            v-if、v-model
		 -->
    <div class="person">
        <h1>差值语法</h1>
        <h3>你好：{{ name }}</h3>
        <hr/>

        <h1>指令语法</h1>
        <a href="school.url">点我去{{ school.name }}学习</a><br>
        <a v-bind:href="school.url">点我去{{ school.name }}学习</a><br>
        <a :href="school.url">点我去{{ school.name }}学习</a><br>
    </div>
</template>


<script setup name="Person">
    import {reactive, ref} from "vue";

    let name = ref('zhangsan')
    let school = reactive({
        name: 'baidu',
        url: 'http://www.baidu.com'
    })
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>